<template>
  <div style="padding: 8px 20px">
    <el-button v-hasPerm="['sys:menu:add']" :icon="CirclePlus" type="primary" @click="handleOpenDialog(0)">新增</el-button>
  </div>

  <el-table :data="tableData" v-loading="loading" row-key="id" style="width: 100%" max-height="500">
    <el-table-column fixed label="菜单名称" align="left" prop="name" width="200"></el-table-column>
    <el-table-column label="路由名称" prop="routeName" align="center" width="120"></el-table-column>
    <el-table-column label="路由路径" prop="routePath" align="center" width="120"></el-table-column>
    <el-table-column label="组件路径" prop="component" align="center" width="120"></el-table-column>

    <el-table-column label="权限" prop="perm" align="center" width="120" />

    <el-table-column label="状态" align="center" width="80">
      <template #default="scope">
        <el-tag v-if="scope.row.visible" type="success">显示</el-tag>
        <el-tag v-else type="info">隐藏</el-tag>
      </template>
    </el-table-column>

    <el-table-column label="类型" align="center" width="80">
      <template #default="scope">
        <el-tag v-if="scope.row.type === 1" type="warning">目录</el-tag>
        <el-tag v-if="scope.row.type === 2" type="success">菜单</el-tag>
        <el-tag v-if="scope.row.type === 3" type="danger">按钮</el-tag>
        <el-tag v-if="scope.row.type === 4" type="info">外链</el-tag>
      </template>
    </el-table-column>
    <el-table-column label="排序" prop="sort" align="center" width="80" />

    <el-table-column fixed="right" align="right" label="操作" width="200">
      <template #default="scope">
        <el-button v-hasPerm="['sys:menu:add']" v-if="scope.row.type == 1 || scope.row.type == 2" type="primary" link
          size="small" @click.stop="handleOpenDialog(scope.row.parentId, scope.row)">
          新增
        </el-button>

        <el-button v-hasPerm="['sys:menu:edit']" type="warning" link size="small"
          @click.stop="handleEditDialog(scope.row, 'edit')">
          编辑
        </el-button>
        <el-button v-hasPerm="['sys:menu:delete']" type="danger" link size="small"
          @click.stop="deleteMenu(scope.row.id)">
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-drawer v-model="dialog" title="新增菜单" :before-close="handleClose" direction="rtl" class="demo-drawer">
    <el-form ref="menuFormRef" :model="formData" :rules="rules"
    :inline="true" label-width="auto" label-position="right" require-asterisk-position="right">
      <el-form-item label="类型">
        <el-radio-group v-model="formData.type" @change="handleMenuTypeChange">
          <el-radio value="1">目录</el-radio>
          <el-radio value="2">菜单</el-radio>
          <el-radio value="3">按钮</el-radio>
          <el-radio value="4">外链</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="父级菜单" prop="parentId" style="width: 275px">
        <el-tree-select v-model="formData.parentId" placeholder="选择上级菜单" :data="menuOptions" filterable check-strictly
          :render-after-expand="false" />
      </el-form-item>

      <el-form-item label="按钮权限" v-if="formData.type == 3">
        <el-input v-model="formData.perm" placeholder="sys:menu:add"></el-input>
      </el-form-item>

      <el-form-item label="菜单名称">
        <el-input v-model="formData.name"></el-input>
      </el-form-item>
      <el-form-item label="路由名称">
        <el-input v-model="formData.routeName"></el-input>
      </el-form-item>
      <el-form-item label="路由路径">
        <el-input v-model="formData.routePath"></el-input>
      </el-form-item>
      <el-form-item label="组件路径">
        <el-input v-model="formData.component"></el-input>
      </el-form-item>

      <el-form-item label="排序">
        <el-input v-model="formData.sort"></el-input>
      </el-form-item>

      <el-form-item label="是否显示">
        <el-radio-group v-model="formData.visible">
          <el-radio value="1">显示</el-radio>
          <el-radio value="0">隐藏</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-button type="primary" round style="width: 100%" @click="submit">确定</el-button>

    </el-form>
  </el-drawer>
</template>

<script setup>
import MenuApi from '@/api/menu';
import { CirclePlus } from '@element-plus/icons-vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { onMounted, ref } from 'vue';

let loading = ref(true);
const dialog = ref(false)

const menuFormRef = ref()
let menuOptions = ref([])
let tableData = ref([])

const initForm = {
  id: 0,
  routeName: "",
  routePath: "",
  component: "",
  perm: "",
  status: 1,
  name: "",
  parentId: 0,
  visible: '1',
  sort: 1,
  type: '1', // 默认菜单
}

let formData = ref(initForm)
// 表单验证规则
const rules = reactive({
  parentId: [{ required: true, message: "请选择顶级菜单", trigger: "blur" }],
  name: [{ required: true, message: "请输入菜单名称", trigger: "blur" }],
  type: [{ required: true, message: "请选择菜单类型", trigger: "blur" }],
});

onMounted(() => {
  loadAllMenus()
})

function loadAllMenus() {
  MenuApi.listMenus(1, 40).then(list => {
    tableData.value = list;
    loading.value = false;
    let filterMenus = list.filter(m => m.type == 0 || m.type == 1);
    menuOptions.value = mapMenus(filterMenus);
    console.log("tableData", tableData);
  }).catch(err => {
    console.log(err)
    loading.value = false;
  });
}

function handleClose() {
  formData.value = initForm;
  dialog.value = false;
}

const handleOpenDialog = (parentId, data) => {
  if (data) {
    formData.value.parentId = data.id
    formData.value.type = data.type + ""
    formData.value.visible = "1"
  } else {
    formData.value.parentId = parentId
  }
  dialog.value = true
}

function handleEditDialog(editData) {
  console.log(editData)
  formData.value = editData
  formData.value.type = editData.type + ""
  formData.value.visible = editData.visible + ""
  dialog.value = true
}

function deleteMenu(menuId) {
  ElMessageBox.confirm(
    '是否真的删除此菜单?',
    '警告',
    {
      confirmButtonText: '删除',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
    MenuApi.delMenu(menuId).then(res => {
      ElMessage({
        type: 'success',
        message: '删除成功！',
      })
      loadAllMenus()
    })
  }).catch(() => {
    ElMessage({
      type: 'info',
      message: 'Delete canceled',
    })
  })
}


function mapMenus(list) {
  return list.map(i => {
    let item = { value: i.id, label: i.name }
    if (i.children && i.children.length > 0) {
      item.children = mapMenus(i.children)
    }
    return item
  })
}

function submit() {
  menuFormRef.value.validate((isValid) => {
    if (isValid) {
      MenuApi.addMenu(formData.value).then(res => {
        dialog.value = false
        ElMessage({
          message: '添加或更新菜单成功',
          type: 'success',
        })
        loadAllMenus()
      }).catch(e => {
        console.log(e)
        ElMessage({
          message: '添加或更新菜单失败,' + e,
          type: 'success',
        })
      })
    }
  })

}
</script>
